﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="consultaStock.aspx.cs" Inherits="jQueryAir.consultaStock" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>EVOLTA 3.0: Consulta de Stock</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">                

        <script src="Scripts/jquery-2.0.3.js"></script>        

        <!--Estilos propios-->
        <link href="Styles/Style.css" rel="stylesheet" />

        <!---Bootstrap-->        
        <link href="Styles/bootstrap.css" rel="stylesheet" />
    </head>

    <script type="text/javascript">        

        $(document).ready(function () {

            var IdEmpresa = 2;
            var IdProyecto = 83;
            var IdEtapa;
            var IdTipoInmueble;            

            var title_proyecto = '';
            var title_etapa = '';
            var title_tipoinmueble = '';            

            var size_pagination = 4;

            $.ajax({
                type: "POST",
                url: "consultaStock.aspx/consultarProyectos",
                data: "{ IdEmpresa: '" + IdEmpresa + "', IdProyecto: '" + IdProyecto + "' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processdata: true,
                success: function (response) {

                    $('.breadcrumb').append('<li class="active">Proyectos</li>');

                    var listaProyectos = response.d;

                    $.each(listaProyectos, function (index, item) {

                        var IdProyecto = item.IdProyecto;
                        var Proyecto = item.NombreProyecto;
                        var Imagen = item.Imagen;
                        var Ubicacion = item.Ubicacion;
                        var Marcador = item.Marcador;

                        $('#proyectos').append('<li><a id="' + IdProyecto + '" class="tooltip-background thumbnail proyecto" title = "<strong> ' + Proyecto + '</strong>">' +
                                                        '<center><small><strong>' + Proyecto + '</strong></small></center>' +
                                                        '<img data-src="Scripts/holder.js/200x200" src="Images/proyectos/' + Imagen + '" style="border-style: none;" alt="' + Proyecto + '">' +
                                                        '<input type="hidden" value="' + Ubicacion + '" />' +
                                                        '<input type="hidden" value="' + Imagen + '" />' +
                                                        '<input type="hidden" value="' + Marcador + '" />' +
                                                   '</a>' +                                                   
                                               '</li>');

                        // Activa los tooltips para los links de los proyectos
                        $('.proyecto').tooltip({ html: true, placement: 'bottom' });
                    });

                    // Oculta divs a excepción del div de proyectos
                    $('#etapa').hide();
                    $('#tipoinmueble').hide();
                    $('#stock').hide();
                    $('#paginacion').hide();
                },
                error: verErrores
            });            

            // Activa popover de ubicación de proyecto con google maps 
            $("#proyectos").on("mouseenter", "a", function () {
                var id = $(this).attr('id');
                var hidden = $('#' + id + ' input').val();
                var marcador = $('#' + id + ' input:eq(2)').val();

                //console.log('hidden mouseenter: ' + hidden);

                var img = '<div><img src="http://maps.googleapis.com/maps/api/staticmap?center=' + hidden + '&zoom=16&size=250x250&maptype=roadmap&markers=color:red%7Csize:mid%7Clabel:E%7C' + marcador + '&sensor=true&key=AIzaSyAJHiUNYKi7qODvybjQDWaEv4If0ZzFHRY"></div>';

                $('#' + id).popover({ html: true, content: img });                
            });

            // Visualiza el div de etapas del proyecto seleccionado
            $("#proyectos").on("dblclick", "a", function () {

                IdProyecto = $(this).attr('id');
                title_proyecto = $(this).text();
                var hidden = $('#' + IdProyecto + ' input:eq(1)').val();

                //console.log('hidden dblclick: ' + hidden);

                // Desactiva el navegador de [Proyecto] convirtiéndolo a link y activa el navegador de [Etapa]
                $('#navegador li:first').text('').removeClass("active").append('<a id="nav_proyecto" href="#">' + title_proyecto + '</a>');
                $('.breadcrumb').append('<li class="active">Etapas</li>');

                // Limpia el div de etapas
                $('#etapas').empty();

                // Consulta de etapas que corresponden al proyecto seleccionado
                $.ajax({
                    type: "POST",
                    url: "consultaStock.aspx/consultarEtapas",
                    data: "{ IdProyecto: '" + IdProyecto + "' }",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    processdata: true,
                    success: function (response) {

                        var listaEtapas = response.d;

                        $.each(listaEtapas, function (index, item) {

                            var IdEtapa = item.IdEtapa;
                            var Etapa = item.NombreEtapa;
                            var Area = item.Area;

                            var date = eval(item.FechaEntrega.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
                            var FechaEntrega = date.getDate() + "/" + ('00' + (date.getMonth() + 1)).substr(1, 2) + "/" + date.getFullYear();

                            var NumeroEdificios = item.NumeroEdificios;
                            var NumeroInmuebles = item.NumeroInmuebles;

                            $('#etapas').append('<li><a id="' + IdEtapa + '" class="tooltip-background thumbnail etapa" ' +
                                                                                   'title = "<strong> ' + Etapa + '</strong>" ' +
                                                                            'data-content = "' +
                                                                                     '<strong>Área:</strong> ' + Area + '<br>' +
                                                                                     '<strong>Fecha de Entrega:</strong> ' + FechaEntrega + '<br>' +
                                                                                     '<strong># Edificios:</strong> ' + NumeroEdificios + '<br>' +
                                                                                     '<strong># Inmuebles:</strong> ' + NumeroInmuebles + '">' +
                                                            '<center><small><strong>' + Etapa + '</strong></small></center>' +
                                                            '<img data-src="Scripts/holder.js/200x200" src="Images/proyectos/' + hidden + '" style="border-style: none;" alt="' + Etapa + '">' +
                                                    '</a>' +
                                                '</li>');

                            $('.etapa').tooltip({ html: true, placement: 'bottom' });
                            $('.etapa').popover({ html: true });
                        });
                    },
                    error: verErrores
                });

                $('#proyecto').hide();
                $('#etapa').show();
                $('#tipoinmueble').hide();
                $('#stock').hide();
                $('#paginacion').hide();
            });

            // Visualiza el div de tipos de inmueble
            $("#etapas").on("dblclick", "a", function () {

                IdEtapa = $(this).attr('id');
                title_etapa = $(this).text();          

                // Desactiva el navegador de [Proyecto] convirtiéndolo a link y activa el navegador de [Etapa]
                $('#navegador li:eq(1)').text('').removeClass("active").append('<a id="nav_etapa" href="#">' + title_etapa + '</a>');
                $('.breadcrumb').append('<li class="active">Tipos de inmueble</li>');

                // Limpia el div de etapas
                $('#tiposinmueble').empty();

                // Consulta de tipos de inmueble
                $.ajax({
                    type: "POST",
                    url: "consultaStock.aspx/consultarTiposInmueble",
                    data: "{ IdProyecto: '" + IdProyecto + "' }",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    processdata: true,
                    success: function (response) {

                        var listaTiposInmueble = response.d;

                        $.each(listaTiposInmueble, function (index, item) {

                            var IdTipoInmueble = item.IdTipoInmueble;
                            var TipoInmueble = item.NombreTipoInmueble;
                            var Unidad = item.Unidad;
                            var Imagen = item.Imagen;

                            //console.log('IdTipoInmueble: ' + IdTipoInmueble);

                            $('#tiposinmueble').append('<li><a id="' + IdTipoInmueble + '" class="tooltip-background thumbnail tipoinmueble" ' + 
                                                                                                 'title = "<strong> ' + TipoInmueble + '</strong>" ' + 
                                                                                          'data-content = "<strong>Unidad:</strong> ' + Unidad + '">' +
                                                                '<center><small><strong>' + TipoInmueble + '</strong></small></center>' +
                                                                '<img data-src="Scripts/holder.js/200x200" src="Images/tiposinmueble/' + Imagen + '" style="border-style: none;" alt="' + TipoInmueble + '">' +
                                                           '</a>' +
                                                       '</li>');

                            // Activa los tooltips para los links de los tipos de inmueble
                            $('.tipoinmueble').tooltip({ html: true, placement: 'bottom' });
                            $('.tipoinmueble').popover({ html: true });
                        });
                    },
                    error: verErrores
                });

                $('#proyecto').hide();
                $('#etapa').hide();
                $('#tipoinmueble').show();
                $('#stock').hide();
                $('#paginacion').hide();
            });

            // Visualiza el div de tipos de inmueble del proyecto y etapa seleccionada
            $("#tiposinmueble").on("dblclick", "a", function () {

                IdTipoInmueble = $(this).attr('id');
                title_tipoinmueble = $(this).text();

                // Desactiva el navegador de [Proyecto] convirtiéndolo a link y activa el navegador de [Etapa]
                $('#navegador li:eq(2)').text('').removeClass("active").append('<a id="nav_tipoinmueble" href="#">' + title_tipoinmueble + '</a>');
                $('.breadcrumb').append('<li class="active">Unidades inmobiliarias</li>');

                // Limpia el div de stock y la paginación
                $('#stock').empty();
                $('.pagination').empty();                

                //console.log("{ IdEmpresa: '" + IdEmpresa + "', IdProyecto: '" + IdProyecto + "', IdEtapa: '" + IdEtapa + "', IdTipoInmueble: '" + IdTipoInmueble + "' }");

                $.ajax({
                    type: "POST",
                    url: "consultaStock.aspx/consultarStock",
                    data: "{ IdEmpresa: '" + IdEmpresa + "', IdProyecto: '" + IdProyecto + "', IdEtapa: '" + IdEtapa + "', IdTipoInmueble: '" + IdTipoInmueble + "' }",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    processdata: true,
                    success: function (response) {

                        // CAVH: Comentado hasta solucionar la paginación
                        //$('.pagination').append('<li><a id="anterior" href="#" class="tooltip-background" title="Anterior">&laquo;</a></li>');

                        var listaInmuebles = response.d;

                        var IdEdificio = listaInmuebles[0].IdEdificio;
                        var Edificio = listaInmuebles[0].Edificio;
                        var flag = false;                                        
                        var pagination = 0;

                        $.each(listaInmuebles, function (index, item) {
                            if (Edificio == item.Edificio) {
                                if (flag == false) {
                                    pagination++;
                                    generarEdificio(pagination, IdEdificio, Edificio);
                                    flag = true;
                                }
                            }
                            else {
                                IdEdificio = item.IdEdificio;
                                Edificio = item.Edificio;
                                pagination++;

                                generarEdificio(pagination, IdEdificio, Edificio);
                            }
                        });                                                            

                        var NroPiso = listaInmuebles[0].NroPiso;
                        flag = false;

                        $.each(listaInmuebles, function (index, item) {
                            if (NroPiso == item.NroPiso) {
                                if (flag == false) {
                                    generarPiso(listaInmuebles[index].IdEdificio, NroPiso);
                                    flag = true;
                                }
                            }
                            else {
                                NroPiso = item.NroPiso;
                                generarPiso(listaInmuebles[index].IdEdificio, NroPiso);
                            }
                        });

                        var nroinmueble = listaInmuebles[0].NroInmueble;
                        flag = false;

                        $.each(listaInmuebles, function (index, item) {
                            if (nroinmueble == item.NroInmueble) {
                                if (flag == false) {
                                    generarInmueble(item);
                                    flag = true;
                                }
                            }
                            else {
                                nroinmueble = item.NroInmueble;
                                generarInmueble(item);
                            }
                        });

                        // CAVH: Comentado hasta solucionar la paginación
                        //$('.pagination').append('<li><a id="siguiente" href="#" class="tooltip-background" title="Siguiente">&raquo;</a></li>');
                        $('#anterior').tooltip('disable');

                        // Oculta todos los divs del div stock
                        $('#stock div').hide();                    
                  
                        // Activa los tooltips para los links de los edificios (paginación)                    
                        $('#siguiente').tooltip({ html: true, placement: 'right' });
                        $('.pagination a').not("[id='anterior']").not("[id='siguiente']").tooltip({ html: true, placement: 'bottom' });

                        // Activa los tooltips para los links de los pisos e inmuebles
                        $('.piso').tooltip({ html: true, placement: 'left' });
                        $('.inmueble').tooltip({ html: true, placement: 'right' });

                        // Activa los popovers para los links de los inmuebles
                        $('.inmueble').popover({ html: true });

                        // Gestión de paginación                        
                        //$('.pagination li').first().addClass("disabled"); // CAVH: Comentado hasta solucionar la paginación

                        //$('.pagination li:eq( 1 )').addClass("active"); // CAVH: Comentado hasta solucionar la paginación
                        $('.pagination li:eq( 0 )').addClass("active");// Se agregó esta línea en lugar de la línea anterior

                        //gestionarPaginacion(size_pagination);

                        // Visualiza el primer edificio que corresponde a la primera página
                        var divid = $("#stock div").first().attr('id');
                        $('#' + divid).show();
                        $("#" + divid + ' div').show();
                    },
                    error: verErrores
                });

                $('#proyecto').hide();
                $('#etapa').hide();
                $('#tipoinmueble').hide();
                $('#stock').show();
                $('#paginacion').show();
            });

            $("#navegador").on("click", "a", function(){
                
                $('#proyecto').hide();
                $('#etapa').hide();
                $('#tipoinmueble').hide();
                $('#stock').hide();
                $('#paginacion').hide();

                $("#navegador ol").empty();

                var id = $(this).attr('id');

                switch (id) {
                    case "nav_proyecto":
                        $('.breadcrumb').append('<li class="active">Proyectos</li>');

                        $('#proyecto').show();
                        break;

                    case "nav_etapa":
                        $('.breadcrumb').append('<li><a id="nav_proyecto" href="#">' + title_proyecto + '</a></li>');
                        $('.breadcrumb').append('<li class="active">Etapas</li>');

                        $('#etapa').show();
                        break;

                    case "nav_tipoinmueble":
                        $('.breadcrumb').append('<li><a id="nav_proyecto" href="#">' + title_proyecto + '</a></li>');
                        $('.breadcrumb').append('<li><a id="nav_etapa" href="#">' + title_etapa + '</a></li>');
                        $('.breadcrumb').append('<li class="active">Tipos de inmuebles</li>');

                        $('#tipoinmueble').show();
                        break;
                }
            });

            /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
   
            function generarEdificio(pagination, IdEdificio, Edificio) {
                $('#stock').append('<div id="edificio' + IdEdificio + '" class="panel panel-danger edificio">' +
                                        '<div class="panel-heading"><h3 class="panel-title text-center"><strong>' + Edificio + '</strong></h3></div>' +
                                        '<div class="panel-body"></div>' +
                                        '<div class="panel-footer table-responsive">' +
                                            '<table class="table table-bordered">' +
                                                '<tr class="danger">' +
                                                    '<th colspan="2" class="text-center">Estado</th>' +
                                                    '<th colspan="2" class="text-center">Tipo Financiamiento</th>' +
                                                    '<th colspan="2" class="text-center">Situación</th>' +
                                                '</tr>' +
                                                '<tr class="danger">' +
                                                    '<td>Disponibles</td>' +
                                                    '<td>2</td>' +
                                                    '<td>Directo</td>' +
                                                    '<td>4</td>' +
                                                    '<td>Cancelado</td>' +
                                                    '<td>6</td>' +
                                                '</tr>' +
                                                '<tr class="danger">' +
                                                    '<td>Separación</td>' +
                                                    '<td>3</td>' +
                                                    '<td>Hipotecario</td>' +
                                                    '<td>2</td>' +
                                                    '<td>Entregado</td>' +
                                                    '<td>1</td>' +
                                                '</tr>' +
                                                '<tr class="danger">' +
                                                    '<th colspan="6" class="text-center">Total de inmuebles : 48</th>' +
                                                '</tr>' +
                                            '</table>' +
                                        '</div>' +
                                   '</div>');

                $('.pagination').append('<li><a id="' + IdEdificio + '" href="#" class="tooltip-background" title="' + Edificio + '">' + pagination + '</a></li>');
            }

            function generarPiso(edificio, NroPiso) {
                $('#edificio' + edificio + ' .panel-body').append('<ul id="edif' + edificio + 'piso' + NroPiso + '"></ul>');
                $('#edif' + edificio + 'piso' + NroPiso).append('<li><a class="tooltip-background thumbnail piso text-center" title = "<strong>Piso #</strong> ' + NroPiso + '">' +
                                                                        '<center><small><strong>Piso # ' + NroPiso + '</strong></small></center>' +
                                                                        '<img data-src="Scripts/holder.js/60x60" src="Images/pisos.png" style="border-style: none;" alt="' + NroPiso + '">' +
                                                                 '</a>' +
                                                             '</li>');

                $('#edificio' + edificio + ' .panel-body').append('<br><br><br><br>');
            }

            function generarInmueble(item) {
               
                $('#edif' + item.IdEdificio + 'piso' + item.NroPiso).append('<li><a class="tooltip-background thumbnail inmueble" ' +
                                                                           'title = "<strong>Departamento N°: ' + item.NroInmueble + '</strong>" ' +
                                                                    'data-content = "' +
                                                                                     '<strong>Precio:</strong> 235,800.00<br>' +
                                                                                     '<strong>Moneda:</strong> ' + item.Moneda + '<br>' +
                                                                                     '<strong>Estado:</strong> SEPARACION<br>' +
                                                                                     '<strong>Cliente:</strong> LESLY ORMEÑO VARILLAS<br>' +
                                                                                     '<strong># Habitacion:</strong> ' + item.NumDormitorio + '<br>' +
                                                                                     '<strong># Baño:</strong> ' + item.NumBanios + '<br>' +
                                                                                     '<strong>Área terreno:</strong> ' + item.AreaTerreno + '<br>' +
                                                                                     '<strong>Área techada:</strong> ' + item.AreaTechada + '<br>' +
                                                                                     '<strong>Área construida:</strong> ' + item.AreaConstruida + '<br>' +
                                                                                     '<strong>Área terraza:</strong> ' + item.AreaTerraza + '<br>' +
                                                                                     '<strong>Área jardín:</strong> ' + item.AreaJardin + '<br>' +
                                                                                     '<strong>Área libre:</strong> ' + item.AreaLibre + '<br>' +
                                                                                     '<strong>Área venta:</strong> ' + item.AreaVenta + '<br>' +
                                                                                     '<strong>Vendedor:</strong> JOSE RUBEN ROMERO ROJAS">' +
                                                                    '<center><small><strong>' + item.NroInmueble + '</strong></small></center>' +
                                                                    '<img data-src="Scripts/holder.js/60x20" src="Images/stock/' + item.TipoFinanciamientoImagen + '60x20.png" style="border-style: none;" alt="' + item.NroInmueble + '">' +
                                                                    '<img data-src="Scripts/holder.js/60x40" src="Images/stock/' + item.EstadoInmuebleImagen + '60x40.png" style="border-style: none;" alt="' + item.NroInmueble + '">' +
                                                                    '</a>' +
                                                             '</li>');

                console.log('item.EstadoInmuebleImagen: ' + item.EstadoInmuebleImagen);
            }

            function verErrores(msg) {                
                console.log('Error: ' + msg.responseText);
            }

            $(".pagination").on("click", "a", function () {
                $('#stock div').hide();

                var id = $(this).attr('id');

                $('#edificio' + id).show();
                $('#edificio' + id + ' div').show();

                // Asigna el estilo active a la paginación clickeada
                $('.pagination li').removeClass("active");
                $(this).not("[id='anterior']").not("[id='siguiente']").parent('li').addClass("active");
            });


            // CAVH: Comentado hasta solucionar la paginación
            /*
            $(".pagination").on("click", "a", function () {
                // Obtiene el valor de la propiedad class del li que contiene al link clickeado
                var clase = $(this).parent('li').attr('class');

                if (clase != "disabled") {

                    $('#stock div').hide();

                    var id = $(this).attr('id');

                    var count_pagination = $('.pagination li').length - 2;

                    // Link SIGUIENTE
                    if (id == "siguiente") {

                        var index_after = 0;

                        //console.log('count_pagination: ' + count_pagination);

                        for (var i = 1; i <= count_pagination; i++) {
                            var li_class = $('.pagination li:eq( ' + i + ' )').attr("class");

                            if (li_class == undefined || li_class == "") {
                                index_after = i;// index_after contará la cantidad de li's sin clase
                            }
                        }

                        console.log('index_after: ' + index_after);

                        for (var i = 1; i <= count_pagination; i++) {
                            if (i <= index_after) {
                                // Oculta la tira de paginaciones que se ya no se visualizará despues de dar click en Siguiente.
                                $('.pagination li:eq( ' + i + ' )').removeClass("active").addClass("hide");
                            }
                            if (i > index_after && i < index_after + size_pagination) {
                                $('.pagination li').first().removeClass('disabled');
                                $('#anterior').tooltip('destroy');
                                $('#anterior').tooltip({ html: true, placement: 'left' });
                                // Remueve la clase hide de la tira de paginaciones que se visualizará despues de dar click en Siguiente.
                                $('.pagination li:eq( ' + i + ' )').removeClass("hide");
                            }
                        }
                        
                        if (index_after + size_pagination > count_pagination) {
                            // Habilita el link Anterior cuando la paginación se encuentra en su última tira
                            $('.pagination li').first().removeClass('disabled');
                            $('#anterior').tooltip('destroy');
                            $('#anterior').tooltip({ html: true, placement: 'left' });
                            // Deshabilita el link Siguiente cuando no hay próximas tiras de paginación
                            $('.pagination li').last().addClass("disabled");
                            $('#siguiente').tooltip('disable');
                        }

                        // Visualiza el primer edificio de la paginación actual despues de dar click en Siguiente.
                        $('.pagination li:eq( ' + (index_after + 1) + ' )').addClass("active");
                        var id = $('.pagination li:eq( ' + (index_after + 1) + ' ) a').attr('id');

                        $('#edificio' + id).show();
                        $('#edificio' + id + ' div').show();
                    }
                    else {
                        // Link ANTERIOR
                        if (id == "anterior") {

                            var index_before = 0;

                            for (var i = count_pagination; i >= 1; i--) {
                                var li_class = $('.pagination li:eq( ' + i + ' )').attr("class");

                                if (li_class == "hide") {
                                    index_before = i;// index_before obtiene el índice del primer li con clase hide antes del li active
                                    break;                                    
                                }
                            }

                            console.log('index_before: ' + index_before);

                            for (var i = count_pagination; i >= 1; i--) {
                                if (i > index_before) {
                                    // Oculta la tira de paginaciones que se ya no se visualizará despues de dar click en Anterior.
                                    $('.pagination li:eq( ' + i + ' )').removeClass("active").addClass("hide");
                                }
                                if (i <= index_before && i > index_before - size_pagination) {
                                    $('.pagination li').last().removeClass('disabled');
                                    $('#siguiente').tooltip('destroy');
                                    $('#siguiente').tooltip({ html: true, placement: 'right' });
                                    // Remueve la clase hide de la tira de paginaciones que se visualizará despues de dar click en Anterior.
                                    $('.pagination li:eq( ' + i + ' )').removeClass("hide");
                                }
                            }

                            if (index_before - size_pagination <= 0) {
                                // Habilita el link Siguiente cuando la paginación se encuentra en su primera tira
                                $('.pagination li').last().removeClass('disabled');
                                $('#siguiente').tooltip('destroy');
                                $('#siguiente').tooltip({ html: true, placement: 'right' });
                                // Deshabilita el link Anterior cuando no hay próximas tiras de paginación
                                $('.pagination li').first().addClass("disabled");
                                $('#anterior').tooltip('disable');
                            }

                            // Visualiza el primer edificio de la paginación actual despues de dar click en Anterior.
                            $('.pagination li:eq( ' + (index_before - (size_pagination - 1)) + ' )').addClass("active");
                            var id = $('.pagination li:eq( ' + (index_before - (size_pagination - 1)) + ' ) a').attr('id');

                            $('#edificio' + id).show();
                            $('#edificio' + id + ' div').show();
                        }
                        else {
                            $('#edificio' + id).show();
                            $('#edificio' + id + ' div').show();

                            // Asigna el estilo active a la paginación clickeada
                            $('.pagination li').removeClass("active");
                            $(this).not("[id='anterior']").not("[id='siguiente']").parent('li').addClass("active");
                        }
                    }
                }
            });
            */

            function gestionarPaginacion(size_pagination) {
                console.log('gestionarPaginacion');
                var count_pagination = $('.pagination li').length - 2;

                if (count_pagination > size_pagination) {
                    for (var i = size_pagination + 1; i <= count_pagination; i++) {
                        $('.pagination li:eq( ' + i + ' )').addClass("hide");
                    }
                }
            }
        });
    </script>

    <body>
        <div class="container">
            <div class="row">
                <div id="navegador" class="col-md-10 col-md-offset-1">
                    <ol class="breadcrumb"></ol>
                </div>

                <div id="proyecto" class="col-md-10 col-md-offset-1">
                    <ul id="proyectos"></ul>
                </div>

                <div id="etapa" class="col-md-10 col-md-offset-1">
                    <ul id="etapas"></ul>
                </div>

                <div id="tipoinmueble" class="col-md-10 col-md-offset-1">
                    <ul id="tiposinmueble"></ul>
                </div>

                <div id="paginacion" class="col-md-10 col-md-offset-1 text-center">
                    <ul class="pagination"></ul>
                </div>

                <div id="stock" class="col-md-10 col-md-offset-1"></div>
            </div>
        </div>

        <script src="Scripts/bootstrap.js"></script>
    </body>
</html>
